<template>
    <Layout>
    </Layout>
    <div class="box">
        <div class="video">
            <div class="video-title">
                <i class="iconfont icon-maomi2"></i>
                <div>2025年2月25日-腾讯前端开发财富部第一轮面试</div>
            </div>
            <div class="video-container">
                <!-- <div class="video-time">
                    <svg-icon class="fs-17" iconName="icon-luzhi-hongse"></svg-icon>
                    <span>REC 00:26:48</span>
                </div> -->
                <div class="video-box">
                    <div v-if="!meetingStart" class="mg-30">会议暂未开始</div>
                    <ConferenceMainView v-else></ConferenceMainView>
                </div>
            </div>
        </div>
        <div class="tool">
            <div class="tool-btn">
                <!-- <div @click="toolBtn(1)" :class="{ 'active-tool-btn': activeToolBtn == 1 }">消息</div> -->
                <div @click="toolBtn(2)" :class="{ 'active-tool-btn': activeToolBtn == 2 }">评分</div>
                <div @click="toolBtn(3)" :class="{ 'active-tool-btn': activeToolBtn == 3 }">编译器</div>
                <div @click="toolBtn(4)" :class="{ 'active-tool-btn': activeToolBtn == 4 }">查看简历</div>
                <!-- <div @click="toolBtn(5)" :class="{ 'active-tool-btn': activeToolBtn == 5 }">上传简历</div> -->
            </div>
            <my-message v-if="activeToolBtn == 1"></my-message>
            <my-score v-if="activeToolBtn == 2"></my-score>
            <my-compiler v-if="activeToolBtn == 3"></my-compiler>
            <view-resume v-if="activeToolBtn == 4"></view-resume>
            <upload-resume v-if="activeToolBtn == 5"></upload-resume>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import MyMessage from '@/components/MyMessage.vue'
import MyScore from '@/components/MyScore.vue'
import MyCompiler from '@/components/MyCompiler.vue'
import ViewResume from '@/components/ViewResume.vue'
import UploadResume from '@/components/UploadResume.vue'
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
import { conference } from '@tencentcloud/roomkit-web-vue3';

const meetingStart = ref(false)
const startConference = async () => {
    await conference.login({
        // 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842
        sdkAppId: 1600075598,
        // 用户在您业务中的唯一标示 Id
        userId: 'panda',
        // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
        userSig: 'eJwtzE8LgjAcxvH3snPItrb2S*hidMkdEqU-x8Gm-orW0BVB9N4z9fh8vvB8SKXL5OU6khKeULIYN1rnI9Y4cjDemjn09mZCQEtStqKUKinXMBX3Dti5waWUfEiTRrz-TQlGQQlQ8ws2wy*L4nyqyuKYAz9Y-Yiw5Xq-7CHUBW1dFD5-muul3WXNhnx-Fj8xGA__',
    });
    await conference.start('123456', {
        roomName: 'TestRoom',
        isSeatEnabled: false,
        isOpenCamera: false,
        isOpenMicrophone: false,
    });
    meetingStart.value = true
}
onMounted(() => {
    if (meetingStart) {
        // startConference()
    }
})

const activeToolBtn = ref(2)
const toolBtn = (index: number) => {
    activeToolBtn.value = index
}

</script>

<style scoped lang="scss">
.box {
    margin: auto;
    width: 94%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .video {
        width: 70%;
        min-width: 800px;
        height: 100%;
        margin-right: 20px;

        .video-title {
            width: 100%;
            height: 10%;
            border-bottom: 3px solid rgba(53, 62, 72, 1);
            display: flex;
            align-items: center;

            // padding: 0 20px;
            .icon-maomi2 {
                padding: 0 10px;
                font-size: large;

            }
        }

        .video-container {
            width: 100%;
            height: 90%;

            .video-time {
                width: 100%;
                height: 8%;
                display: flex;
                align-items: center;
                padding: 0 10px;
                font-size: 12px;

                .icon-luzhi-hongse {
                    color: red;
                    padding-right: 5px;
                }
            }

            .video-time>span {
                padding: 5px 10px;
                background-color: rgba(117, 129, 143, 0.5);
                border-radius: 15px;
            }

            .video-box {
                width: 100%;
                height: 90%;
                background-color: rgb(98, 95, 96);
                border-radius: 15px;
            }
        }
    }

    .tool {
        width: 30%;
        height: calc(100vh - 45px);
        min-width: 400px;
        padding: 0 20px;
        margin-top: 20px;
        margin-bottom: 10px;
        border-radius: 15px;
        background-image: linear-gradient(to right, rgb(79, 80, 88) 10%, rgb(50, 58, 69));

        .tool-btn {
            margin: 20px 0;
            display: flex;
            justify-content: space-around;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(117, 129, 143, 1);

            .active-tool-btn {
                padding: 10px 30px;
                border-radius: 15px;
                background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
            }
        }

        .tool-btn div {
            padding: 10px 20px;
            cursor: pointer;
        }
    }
}
</style>